<template>
    <div class="containers">
        <div class="header">
            <img @click="goHome" src="../assets/images/pic_img2/btn_home.png" alt="">
            <img @click="goReturn" src="../assets/images/pic_img2/btn_return.png" alt="" style="margin-left: 37px;">
        </div>
        <div class="buttons">
            {{ names }}
        </div>
        <div class="centers">
            <div class="top">
                <div>白班</div>
                <div>夜班</div>
            </div>
            <div class="lists">
                <div class="lists-item" v-for="value in lists" @click="goDetail(value.id)">
                    <div v-if="value.oneColumn || value.twoColumn">
                        <img src="../assets/images/pic_img3/car.png">
                    </div>
                    <div v-else>
                        <img src="../assets/images/pic_img3/car1.png">
                    </div>
                    <div>{{ value.oneColumn || value.twoColumn || '--' }}</div>
                </div>
            </div>
        </div>
        <div class="footers">Copyright © 2025 动车入库作业智能登销记系统</div>
    </div>
</template>
<script>
import { dayShift, nightShift, machineplanId } from '@/api/home.js'
export default {
    data() {
        return {
            ids: '',
            names: '检11-1',
            lists: new Array(8)
        }
    },
    created() {
        this.ids = this.$route.query.id;
        console.log(this.ids, Number(localStorage.getItem('pageId')))
        this.names = '检' + this.ids + (Number(localStorage.getItem('pageId')) > 4 ? '-2' : '-1')
        const placeholder = { oneColumn: '', twoColumn: '' };
        this.lists = Array.from({ length: 8 }, () => placeholder);
        Promise.all([
            dayShift({ trackId: this.ids }),
            nightShift({ trackId: this.ids })
        ]).then(([day, night]) => {
            const tmp = [...this.lists];
            if (day.rows && day.rows.length) {
                day.rows[0] && (tmp[0] = day.rows[0]);
                day.rows[1] && (tmp[2] = day.rows[1]);
                day.rows[2] && (tmp[4] = day.rows[2]);
                day.rows[3] && (tmp[6] = day.rows[3]);
            }
            if (night.rows && night.rows.length) {
                night.rows[0] && (tmp[1] = night.rows[0]);
                night.rows[1] && (tmp[3] = night.rows[1]);
                night.rows[2] && (tmp[5] = night.rows[2]);
                night.rows[3] && (tmp[7] = night.rows[3]);
            }
            this.lists = tmp;
        });
    },
    methods: {
        goReturn() {
            this.$router.go(-1)
        },
        goHome() {
            this.$router.push("/login")
        },
        goDetail(id) {
            machineplanId(id).then(res => {
                if (res.data) {
                    if (res.data.type != 4) {
                        // 判断是哪个作业 点击进去显示的图片不同
                        this.$router.push(`/works?id=${id}&status=${res.data.type}`)
                    } else {
                        this.$router.push(`/faceWork?id=${id}&typeStart=${res.data.type}&type=3`)
                    }
                } else {
                    this.$router.push(`/workType?id=${id}`)
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.containers {
    width: 100%;
    font-family: Microsoft YaHei;
    height: 100%;
    background-image: url("../assets/images/pic_img2/track_bg.jpg");
    background-size: cover;
    position: relative;

    .header {
        position: absolute;
        left: 569px;
        top: 186px;
    }

    .centers {
        position: absolute;
        left: 20px;
        top: 443px;

        .top {

            display: flex;
            align-items: center;
            margin-bottom: 41px;

            >div {
                color: #fff;
                text-align: center;
                font-size: 40px;
                line-height: 119px;
                font-weight: bold;
                width: 506px;
                height: 119px;
                background-image: url("../assets/images/pic_img3/baiye.png");
                background-size: 100% 100%;
            }

            >div:last-child {
                margin-left: 28px;
            }
        }

        .lists {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .lists-item {
                color: #fffc00;
                text-align: center;
                font-size: 40px;
                font-weight: bold;
                width: 506px;
                height: 178px;
                background-image: url("../assets/images/pic_img3/car_bj.png");
                background-size: 100% 100%;
                margin-bottom: 50px;

                &:nth-child(even) {
                    margin-left: 28px;
                }

                >div:first-child {
                    margin-top: 32px;
                }

                >div:last-child {
                    margin-top: 5px;
                }
            }
        }
    }

    .buttons {
        position: absolute;
        left: calc((100% - 261px) / 2);
        top: 295px;
        color: #fff;
        text-align: center;
        font-size: 36px;
        line-height: 89px;
        font-weight: bold;
        width: 261px;
        height: 89px;
        background-image: url("../assets/images/pic_img3/btn_j.png");
        background-size: 100% 100%;
    }
}
</style>